<template>
    <div class="container">
      <div v-show="deviceType===1" class="chat-aside">
        <chat-logo></chat-logo>
        <chat-menu @selectInfo="selectInfo" ref="menu"></chat-menu>
        <chat-ad></chat-ad>
<!--        <chat-config></chat-config>-->
        <chat-job></chat-job>
      </div>
      <div class="chat-left">
        <chat-title :groupName="groupName"></chat-title>
        <chat-main ref="main"></chat-main>
        <chat-send @sendMsg="sendMsg" ref="send"  @keydown.enter.native="sendText($event)"></chat-send>
      </div>
      <div class="chat-circle" @click="closeSE"><div style="margin-top: 13px"><span>关闭</span></div></div>
    </div>
</template>

<script>
import EventSource from 'eventsource';
import ChatLogo from "@/components/chat-aside/chat-logo";
import ChatNew from "@/components/chat-aside/chat-new";
import ChatMenu from "@/components/chat-aside/chat-menu";
import ChatAd from "@/components/chat-aside/chat-ad";
import ChatConfig from "@/components/chat-aside/chat-config";
import ChatJob from "@/components/chat-aside/chat-job";
import ChatTitle from "@/components/chat-title/chat-title";
import ChatMain from "@/components/chat-main/chat-main";
import ChatSend from "@/components/chat-send/chat-send";
import {setDeviceInfo} from "@/utils/storage";
import {chat, closeChat} from "@/api/sse";
import Vue from 'vue';
export default {
name: "index",
  components: {ChatSend, ChatMain, ChatTitle, ChatJob, ChatConfig, ChatAd, ChatMenu, ChatNew, ChatLogo},
  data(){
  return{
    groupName:null,
    content:null,
    deviceType:1, //1pc 2h5
    es:null,
    uid:123456,
    eventSource:null,
  }
  },
  mounted() {
    this.clientWidth()
    this.initSSE();
  },
  methods:{
    initSSE(){
      const url = `${process.env.VUE_APP_API_BASE_URL}/createSse`; // 替换为实际的SSE端点URL
      this.eventSource = new EventSource(url,{headers:{uid:this.uid}});
      this.eventSource.onmessage = (event) => {
        // 处理接收到的SSE数据

        let payload;
        try{
          payload =JSON.parse(event.data);
        }catch (error) {
          // console.error("内容报异常")
        }
        if(undefined!=payload){
          this.$refs.main.appendMsg(payload)
        }
      };
      this.eventSource.onerror = (error) => {
        // 处理连接错误
        console.error(error);
      };
    },
    sendText(event){
      if (event.keyCode === 13) {
        this.$refs.send.sendMessages()
        this.$refs.main.toBottom()
        return false
      }
    },
    closeSE(){
      let param = {uid:this.uid}
      this.eventSource.close()
      closeChat(param).then(()=>{
      })
    },
    sendMsg(textarea){
        chat({msg:textarea,uid:this.uid}).then(()=>{
          this.$refs.main.appendQ(textarea)
          this.$refs.send.echoQuestion()
          let data = {id:1,groupName:textarea}
          this.$refs.menu.addGroup(data)
        })
    },
    selectInfo(item){
      if(""===item){
        return
      }else{
        this.groupName = item.groupName
        this.$refs.main.showMsg(item.id)
      }
    },
    clientWidth(){
      //监听宽度,判断是否关闭对应的菜单
      let deviceInfo = 'pc';
      this.deviceType = 1
      if(document.body.clientWidth>document.body.clientHeight){
        setDeviceInfo(deviceInfo);
      }else{
        deviceInfo = 'h5'
        this.deviceType = 2
        setDeviceInfo(deviceInfo);
      }
    },
  },


}
</script>

<style scoped>
.container{
  display: flex;
  justify-content: flex-start;
  justify-items: center;
}
.chat-aside{
  height: calc(100vh);
  width: 13vw;
  text-align: center;
  color: black;
}
.chat-left{
  height: calc(100vh);
  width: 87vw;
}
.chat-circle{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  top: 85%;
  left: 85%;
  background: rgba(18, 17, 17, 0.2);
  text-align: center;
  cursor: pointer;
  border: solid 1px #e2e8e1;
}
@media (max-width: 768px) {
  .chat-left{
    height: calc(100vh);
    width: 100vw;
  }
}
</style>